<template>
	<view class="container">
		<view class="content">
			<view class="textarea">
				<textarea v-model="formData.content" placeholder-style="color:#c3c3c3" placeholder="你对我们的产品有什么建议呢？对需求上有什么更好的建议呢" />
				</view>
			<view class="tui-box-upload">
				<tui-upload :value="value" :limit='1' :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
			</view>
		</view>
		<view class="btn">
			提交
		</view>
		<view class="rate-main">
			<view class="rate-tit">
				<view class="title">
					热门问题
				</view>
				<view class="more" @click="more">
					更多
				</view>
			</view>
			<view class="rateUl">
				<block v-for="(item,index) in dataList" :key="index">
					<tui-collapse :index="index" :current="item.current" :disabled="item.disabled" @click="change" class="item" hdBgColor="transparent" >
						<template v-slot:title>
							<tui-list-cell :lineLeft="false" :hover="!item.disabled" :backgroundColor="transparent">{{item.name}}</tui-list-cell>
						</template>
						<template v-slot:content>
							<view class="tui-content">{{item.intro}}</view>
						</template>
					</tui-collapse>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				formData: {},
				imageData: [],
				//上传地址
				serverUrl: "https://api.yanglao12349.com/upload",
				value:[] ,//初始化图片
				dataList: [{
						name: "杜甫",
						intro: "杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。",
						current: -1,
						disabled: false
					},
					{
						name: "李清照",
						intro: "李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。",
						current: -1,
						disabled: false
					},
					{
						name: "鲁迅",
						intro: "鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。",
						current: -1,
						disabled: false
					}
				],
			}
		},
		onReady() {},
		methods: {
			change(e) {
				let index = e.index;
				let item = this.dataList[index];
				item.current = item.current == index ? -1 : index
			},
			result: function(e) {
				console.log(e)
				this.imageData = e.imgArr;
			},
			remove: function(e) {
				//移除图片
				console.log(e)
				let index = e.index
			},
			more () {
				uni.navigateTo({
					url:'../helpCenter/index'
				})
			}
		},
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.container {
		.content {
			margin-bottom: 54rpx;
			padding: 32rpx 28rpx 18rpx;
			box-sizing: border-box;
			background: #fff;
			.textarea {
				width: 100%;
				height: 160rpx;
				margin-bottom: 24rpx;
				font-size: 28rpx;
				color: #333;
				textarea {
					width: 100%;
					height: 100%;
				}
			}
		}
		.btn {
			width: 662rpx;
			height: 90rpx;
			margin: 0 auto 50rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			background: linear-gradient(to right, #fc4250, #fe744b);
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			font-weight: bold;
		}
		.rate-main {
			padding: 0 28rpx;
		}
		.item {
			::v-deep {
				tui-list-cell {
					background: #FF0000;
					.tui-list-cell {
						font-size: 28rpx!important;
						color: #000!important;
					}
				}
			}
			.tui-content {
				padding:12rpx 0rpx;
				line-height: 48rpx;
				font-size: 28rpx;
				color: #333;
			}
		}
		.rate-tit {
			display: flex;
			height: 105rpx;
			border-bottom: 1px solid rgba($color: #eaeef1, $alpha: 1);
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			-ms-flex-pack:justify ;
			justify-content: space-between;
			align-items: center;
			.title {
				font-size: 28rpx;
				color: 333rpx;
			}
			.more {
				font-size: 28rpx;
				color: 333rpx;
			}
		}
	}
</style>
